<template>
  <div class="container">
    <el-card shadow="never">
      <!-- 头部 -->
      <div class="search-header">
        <el-form
          class="searchForm"
          ref="searchForm"
          :model="searchForm"
          label-width="80px"
        >
          <el-form-item label="关键字">
            <el-input
              @keydown.enter.native="search"
              placeholder="请根据编号搜索"
              style="width: 200px"
              v-model="searchForm.questionId"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-button size="small" @click="cleanInp">清除</el-button>
            <el-button
              ref="searchBtn"
              size="small"
              type="primary"
              @click="search"
              >搜索</el-button
            >
          </el-form-item>
        </el-form>
      </div>
      <!-- 提示盒子 -->
      <div class="alert-box">
        <el-alert class="alert" type="info" :closable="false" show-icon>
          数据一共 {{ total }} 条
        </el-alert>
      </div>
      <!-- 主体盒子 -->
      <div class="main-box">
        <el-table
          v-loading="loading"
          :data="list"
          :header-cell-style="{
            background: '#fafafa',
            borderBottom: '2px solid #e8e8e8'
          }"
        >
          <el-table-column prop="id" label="编号" width="220">
          </el-table-column>
          <el-table-column
            prop="questionType"
            label="题型"
            :formatter="formatQuestionType"
            width="80"
          >
          </el-table-column>
          <el-table-column prop="questionIDs" label="题目编号" width="220">
            <template #default="{ row }">
              <el-link
                type="primary"
                v-for="item in row.questionIDs"
                :key="item.number"
                @click="questionsPreview(item.id)"
                >{{ item.number }}</el-link
              >
            </template>
          </el-table-column>
          <el-table-column prop="addTime" label="录入时间" width="180">
          </el-table-column>
          <el-table-column
            prop="totalSeconds"
            label="答题时间(s)"
            :formatter="formatTime"
          >
          </el-table-column>
          <el-table-column prop="accuracyRate" label="正确率(%)">
          </el-table-column>
          <el-table-column prop="userName" label="录入人"> </el-table-column>
          <el-table-column prop="" width="80" label="操作">
            <template #default="{ row }">
              <el-button
                title="删除"
                @click="delRandoms(row.id)"
                class="btn"
                size="small"
                type="danger"
                icon="el-icon-delete"
                circle
                plain
              ></el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页 -->
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="page"
          :page-sizes="[10, 20, 30, 50, 100]"
          :page-size="pagesize"
          layout="->, prev, pager, next,sizes, jumper"
          :total="total"
        >
        </el-pagination>
      </div>
      <!-- 题目预览弹出框 -->
      <el-dialog
        width="70%"
        @close="closeDialog"
        title="题目预览"
        :visible="previewDialog"
      >
        <el-row :gutter="20">
          <el-col :span="6"
            ><div class="grid-content bg-purple">
              【题型】：{{ transQuestionType(questionsList.questionType) }}题
            </div></el-col
          >
          <el-col :span="6"
            ><div class="grid-content bg-purple">
              【编号】：{{ questionsList.id }}
            </div></el-col
          >
          <el-col :span="6"
            ><div class="grid-content bg-purple">
              【难度】：{{ transDifficulty(questionsList.difficulty) }}
            </div></el-col
          >
          <el-col :span="6"
            ><div class="grid-content bg-purple">
              【标签】：{{ questionsList.tags }}
            </div></el-col
          >
        </el-row>
        <el-row :gutter="20">
          <el-col :span="6"
            ><div class="grid-content bg-purple">
              【学科】：{{ questionsList.subjectName }}
            </div></el-col
          >
          <el-col :span="6"
            ><div class="grid-content bg-purple">
              【目录】：{{ questionsList.directoryName }}
            </div></el-col
          >
          <el-col :span="6"
            ><div class="grid-content bg-purple">
              【方向】：{{ questionsList.direction }}
            </div></el-col
          >
        </el-row>
        <hr style="margin: 15px 0" />
        <span>【题干】:</span>
        <br />
        <div v-html="questionsList.question" style="color: #4b4bff"></div>

        <div v-if="+questionsList.questionType === 1">
          <span style="marginright: 8px">单选题</span>
          <span style="marginright: 8px"> 选项:</span>
          <span> (以下选中的选项为正确答案)</span>
          <div>
            <el-radio
              class="radio"
              :value="previewRadio"
              :label="item.id"
              v-for="item in questionsList.options"
              :key="item.id"
              >{{ item.title }}</el-radio
            >
          </div>
        </div>
        <div v-else-if="+questionsList.questionType === 2">
          <span style="marginright: 8px">多选题</span>
          <span style="marginright: 8px"> 选项:</span>
          <span> (以下选中的选项为正确答案)</span>
          <el-checkbox-group :value="checkList">
            <el-checkbox
              class="radio"
              v-for="item in questionsList.options"
              :key="item.id"
              :label="item.id"
              >{{ item.title }}</el-checkbox
            >
          </el-checkbox-group>
        </div>
        <div v-else>
          <span>{{ formatQuestionType(questionsList.questionType) }}</span>
          <span style="marginright: 8px">多选题</span>
        </div>

        <hr />
        【参考答案】：<el-button
          @click="showVideo = true"
          size="small"
          type="danger"
          >视频答案预览</el-button
        >
        <br />
        <video
          v-if="showVideo"
          :src="questionsList.videoURL"
          controls="controls"
          autoplay
        >
          您的浏览器不支持 video 标签。
        </video>
        <hr />
        【答案解析】：<a :href="questionsList.videoURL">{{
          questionsList.videoURL
        }}</a
        >有答案
        <hr />
        【题目备注】：
        <span>{{ questionsList.remarks }}</span>
        <span slot="footer" class="dialog-footer">
          <el-button type="primary" @click="closeDialog">关闭</el-button>
        </span>
      </el-dialog>
    </el-card>
  </div>
</template>

<script>
import { randoms, removeRandoms, detail } from '@/api/hmmm/questions'
import { questionType, difficulty } from '../../api/hmmm/constants'
export default {
  name: 'QuestionsRandoms',
  data () {
    return {
      // 搜索表单数据
      searchForm: {
        questionId: ''
      },

      loading: false, // 加载
      list: [], // 表格数据
      total: 0, // 表格总数
      page: 1, // 页码
      pagesize: 10, // 每页大小

      previewDialog: false, // 对话框
      questionsList: {}, // 组题列表数据

      showVideo: false, // 显示视频
      checkList: [], // 多选数组
      previewRadio: '' // 单选数据
    }
  },
  created () {
    this.getQuestionsList()
  },
  methods: {
    // 获取题库
    async getQuestionsList () {
      this.loading = true
      const { data } = await randoms({
        page: this.page,
        pagesize: this.pagesize,
        keyword: this.searchForm.questionId
      })
      this.total = data.counts
      this.list = data.items
      this.loading = false
    },
    // 分页的功能函数
    handleSizeChange (pagesize) {
      this.pagesize = pagesize
      this.page = 1
      this.getQuestionsList()
    },
    handleCurrentChange (page) {
      this.page = page

      this.getQuestionsList()
    },
    // 格式化答题时间
    formatTime (row, column, cellValue, index) {
      return cellValue % 60
    },
    // 格式化 table 里的题型列
    formatQuestionType (row, column, cellValue, index) {
      const res = questionType.find((item) => item.value === +cellValue)
      return res ? res.label : '未知'
    },
    // 转换dialog里的题型
    transQuestionType (val) {
      const res = questionType.find((item) => item.value === +val)
      return res ? res.label : '未知'
    },
    // 转换dialog里的难度
    transDifficulty (val) {
      const res = difficulty.find((item) => item.value === +val)
      return res ? res.label : '未知'
    },
    // 删除组题
    async delRandoms (id) {
      const result = await this.$confirm('确认要删除吗?', '提示', {
        type: 'warning'
      }).catch((e) => e)
      if (result === 'cancel') return
      await removeRandoms({ id })

      // 删除当前页跳转至前一页
      if (this.list.length === 1 && this.page > 1) {
        this.page--
      }

      this.$message.success('删除成功')
      // 重新渲染页面
      this.getQuestionsList()
    },
    // 关闭对话框
    closeDialog () {
      this.previewDialog = false
    },
    // 弹出对话框
    async questionsPreview (id) {
      const { data } = await detail({ id })
      this.questionsList = data
      this.previewDialog = true

      if (+this.questionsList.questionType === 1) {
        const res = this.questionsList.options.find((item) => {
          return item.isRight === 1
        })
        this.previewRadio = res.id
      } else if (+this.questionsList.questionType === 2) {
        this.questionsList.options.forEach((item) => {
          if (item.isRight === 1) {
            this.checkList.push(item.id)
          }
        })
      }
    },
    // 搜索功能
    search () {
      // 搜索之后跳转至第一页
      this.page = 1
      // 重新渲染页面
      this.getQuestionsList()
    },
    // 清空标签还原数据
    cleanInp () {
      this.searchForm.questionId = ''
      // 重新渲染页面
      this.getQuestionsList()
    }
  }
}
</script>

<style scoped lang="scss">
.container {
  padding: 10px 10px;
  .searchForm {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  ::v-deep .el-alert .el-alert__description {
    font-size: 13px;
    margin: 5px 0 0;
  }
  ::v-deep .el-alert__icon.is-big {
    font-size: 16px;
    width: 15px;
  }
  .alert {
    margin-bottom: 18px;
  }
  .radio {
    display: block;
    margin: 15px 0;
  }
}
::v-deep .el-loading-mask{
  z-index: 998;
}
</style>
